Recap.

1
Custom Hooks lets you share logic between components.
2
Custom Hooks must be named starting with use followed by a capital letter.
3
Custom Hooks only share stateful logic, not the state itself.
4
You can pass reactive values from one Hook to another, and they stay up-to-date.
5
All Hooks re-run every time your component re-renders.
6
The code of your custom Hooks should be pure, like your component’s code.
7
Wrap event handlers received by custom Hooks into Effect Events.
8
Don’t create custom Hooks like useMount. Keep their purpose specific.

Difficulty: 5/10

Topics: state management, component composition, performance

0-2 years experience

1
How would you add a simple recap panel that lists the last three actions a user performed in a form?
2
If you forget to include a key prop when rendering a list of recap items, what UI issue might you see?

2-5 years experience

1
We have a feature where users can edit items and we need to show a live recap of changes; why might the recap not update correctly when using useEffect?
2
Explain the trade‑offs between storing the recap history in component state versus a global store like Redux.

5-8 years experience

1
Design a reusable Recap component that can handle thousands of entries without hurting performance; what techniques would you use?
2
How would you ensure the recap stays in sync across multiple tabs of the same app?

8+ years experience

1
If the product roadmap includes moving the recap functionality to a micro‑frontend, what architectural considerations would you raise?
2
Discuss how you’d version and migrate the recap data schema across teams without breaking existing users.

❓What would happen if the recap data grows very large?
❓How would you test that the recap updates correctly under rapid user actions?
❓Can you compare using local component state versus a Redux store for this feature?